import React , {useState} from 'react'
import {Button,Typography, Tabs } from 'antd'
import './index.scss'
import LgName from '../../components/LgName'
import LgPhone from '../../components/LgPhone'

const {Title} = Typography
const {TabPane } = Tabs 

export default function Login() {
  const [src,setSrc] = useState<string>('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3760b2031ff41ca0bd80bc7a8a13f7bb_preview.mp4')
  const [knum,setKnum] = useState<any>('name')
  return (
    <div className="login">
        <video 
            autoPlay
            muted
            loop
            playsInline
            id="myvideo"
            src={src}
            className="myvideo">
        </video>
        <div className="login-box">
            <Title className='title'>校园SaaS管理系统</Title>
            <div className="box">
            <Tabs defaultActiveKey={knum} >
              <TabPane tab="用户名登录" key="name">
                  <LgName/>
              </TabPane>
              <TabPane tab="手机号登录" key="phone">
                  <LgPhone/>
              </TabPane>
            </Tabs>
            </div>
        </div>
    </div>
  )
}